<template>
  <div>
    <el-dialog append-to-body title="选座" :visible.sync="visible" width="60%">
      <div class="seat-wrap">
        <head-tip></head-tip>
        <Area ref="room" v-if="seatRows" :seat-rows="seatRows" @seatClick="seatClick">
          <div slot="seatMenu" class="blankMenu">
            <div @click="clickPop"><i class="el-icon-s-flag"></i>选座</div>
          </div>
        </Area>
      </div>
      <div class="seat-name">座位：{{ seatName }}</div>
      <TimeSlider
        v-if="visible"
        :chooseDate="chooseDate"
        :startTime="room.openhours"
        :endTime="room.endhours"
        ref="timeSlider"
      ></TimeSlider>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit()">预 约</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/req'
import Area from '../components/Area.vue'
import HeadTip from '../components/HeadTip.vue'
import TimeSlider from '../components/TimeSlider.vue'
export default {
  components: { HeadTip, Area, TimeSlider },
  data() {
    return {
      visible: false,
      seatRows: null,
      seatCurIndex: 0,
      seatName: '请选择座位',
      roomId: '',
      chooseDate: '',
      room: {},
    }
  },
  methods: {
    openDia(room, chooseDate) {
      this.room = { ...room }
      this.roomId = room.id
      this.chooseDate = chooseDate
      this.seatRows = null
      this.seatCurIndex = 0
      this.seatName = '请选择座位'
      this.getSeatRows()
      this.visible = true
    },
    submit() {
      if (this.seatName === '请选择座位') {
        this.$message({
          type: 'warning',
          message: '请选择座位',
        })
        return
      }
      // if (new Date().getHours() >= 22) {
      //   this.$message({
      //     type: 'warning',
      //     message: '22点之后无法预约',
      //   })
      //   return
      // }
      const user = sessionStorage.getItem('user')
      if (!user) {
        this.$message({
          type: 'warning',
          message: '请先登录再预约',
        })
        return
      }
      const param = {
        startTime: this.$refs.timeSlider.getStartTime(),
        endTime: this.$refs.timeSlider.getEndTime(),
        uid: this.$getUser().uid,
        sid: this.seatRows[this.seatCurIndex].sid,
        orderDate: this.chooseDate,
        libId: this.room.libId,
        floorId: this.room.floorId,
        roomId: this.room.id,
      }
      if (param.startTime === param.endTime) {
        this.$message({
          type: 'warning',
          message: '时间非法！',
        })
        return
      }
      request.post('/user/addReservation', param).then((res) => {
        if (res.code === 200) {
          // this.$message({
          //   type: 'success',
          //   message: '预约成功',
          // })
          // this.visible = false
          const _this = this
          this.$alert(`你已成功预约${this.seatName}号座位`, '', {
            confirmButtonText: '确定',
            callback: (action) => {
              _this.visible = false
              // this.$message({
              //   type: 'info',
              //   message: `action: ${action}`,
              // })
            },
          })
        } else {
          // this.$message({
          //   type: 'warning',
          //   message: '预约失败，当前已有预约',
          // })
          const _this = this
          this.$alert(`你已有预约，无法再次预约`, '', {
            confirmButtonText: '确定',
            callback: (action) => {
              _this.visible = false
              // this.$message({
              //   type: 'info',
              //   message: `action: ${action}`,
              // })
            },
          })
        }
      })
    },
    clickPop() {
      this.$nextTick(() => {
        // let area = this.$refs.toggleArea.getArea()
        this.seatName =
          this.seatRows[this.seatCurIndex].row + this.seatRows[this.seatCurIndex].column
      })
    },
    getSeatRows() {
      this.$nextTick(() => {
        if (this.$refs)
          request
            .post('/public/getAreaSeats', {
              roomId: this.roomId,
              orderDate: this.chooseDate,
            })
            .then((res) => {
              this.seatRows = res.rows
            })
      })
    },
    seatClick(index) {
      console.log(this.seatRows[index])
      if (
        this.seatRows[index].type === 1 ||
        this.seatRows[index].state === 2 ||
        this.seatRows[index].state === 1
      ) {
        this.seatRows[index].show = false
        return
      }
      this.seatCurIndex = index
    },
  },
}
</script>

<style scoped>
.seat-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.seat-name {
  margin: 10px 0;
}
</style>
